<template>
  <div id="homepage">
    <i class="el-icon-full-screen fullscreen" @click="fullScreen()"></i>
    <div class="header">
      <img class="title" src="./title.png" />
      <!-- <div class="title-font">宏凯铝业5G智慧工厂总览</div> -->
      <div class="title-font">加多利铝业5G智慧工厂总览</div>
      <div class="now">{{ nowDate }}</div>
    </div>
    <div class="container">
      <div class="row flex-between box">
        <div style="width: 33%">
          <div class="pannel3" style="margin-bottom: 4px">
            <img class="label" src="./label4.png" />
            <div class="flex-relative">
              <img class="box-img" src="./sign.png" />
              <div class="box-info">设备状态</div>
            </div>
            <div class="row flex-wrap">
              <div
                class="device-info"
                v-for="item in info.deviceStatusList"
                :key="item.id"
              >
                <img
                  style="width: 40px; height: 40px"
                  v-if="item.deviceName.includes('挤压机')"
                  src="./device1.png"
                />
                <img
                  style="width: 40px; height: 40px"
                  v-else
                  src="./device2.png"
                />
                <div class="device-name">{{ item.deviceName }}</div>
                <div class="close" v-if="item.runStatus == 0">未运行</div>
                <div class="close" v-else-if="item.runStatus == 2">离线</div>
                <div class="run" v-else>运行中</div>
              </div>
            </div>
          </div>
          <div class="pannel3">
            <img class="label" src="./label4.png" />
            <div class="flex-relative">
              <img class="box-img" src="./sign.png" />
              <div class="box-info">生产完成率</div>
            </div>
            <div class="time">{{ now }}</div>
            <div class="row model-pannel">
              <div class="model-title2">总订单量</div>
              <div
                v-for="(subitem, index) in info.orderStats.totalOrders"
                class="row"
                :key="subitem.id"
              >
                <div class="model-number2">{{ subitem }}</div>
              </div>
              <div class="unit">单</div>
            </div>
            <div class="row model-pannel">
              <div class="model-title2">已完成订单量</div>
              <div
                v-for="(subitem, index) in info.orderStats.completedOrders"
                class="row"
                :key="subitem.id"
              >
                <div class="model-number2">{{ subitem }}</div>
              </div>
              <div class="unit">单</div>
            </div>
            <div class="row model-pannel">
              <div class="model-title2">未完成订单量</div>
              <div
                v-for="(subitem, index) in info.orderStats.uncompletedOrders"
                class="row"
                :key="subitem.id"
              >
                <div class="model-number2">{{ subitem }}</div>
              </div>
              <div class="unit">单</div>
            </div>
            <div class="row model-pannel">
              <div class="model-title2">完成率</div>
              <div
                v-for="(subitem, index) in info.orderStats.completionRate"
                class="row"
                :key="subitem.id"
              >
                <div class="model-number2">{{ subitem }}</div>
                <span
                  class="unit"
                  v-if="index == info.orderStats.completionRate.length - 1"
                  >%</span
                >
              </div>
            </div>
          </div>
        </div>
        <div style="width: 33%">
          <div class="pannel3" style="margin-bottom: 4px">
            <img class="label" src="./label4.png" />
            <div class="flex-relative">
              <img class="box-img" src="./sign.png" />
              <div class="box-info">能耗统计</div>
            </div>
            <div class="row flex-wrap">
              <div class="cTime">{{ ctime }}</div>
              <div
                class="row model-pannel"
                v-for="item in info.electricityMeterList"
                :key="item.id"
              >
                <div class="model-title">{{ item.deviceName }}</div>
                <div
                  v-for="(subitem, index) in item.total"
                  class="row"
                  :key="subitem.id"
                >
                  <div class="model-number">{{ subitem }}</div>
                </div>
                <div class="unit">度</div>
              </div>
            </div>
          </div>
          <div class="pannel3">
            <img class="label" src="./label4.png" />
            <div class="flex-relative">
              <img class="box-img" src="./sign.png" />
              <div class="box-info">完成率统计</div>
            </div>
            <div id="bar3" style="width: 100%; height: 220px"></div>
          </div>
        </div>
        <div class="pannel">
          <img class="label" src="./label1.png" />
          <div class="flex-relative">
            <img class="box-img" src="./sign.png" />
            <div class="box-info">班次质量统计</div>
            <div class="table-box">
              <div class="cTime2">{{ ctime }}</div>
              <el-table
                :data="teamQualityStatsArr"
                stripe
                :header-cell-style="{
                  fontFamily: 'OPPOSans',
                  fontWeight: 'bold',
                  fontSize: '15px',
                  color: '#FFFFFF',
                  lineHeight: '28px',
                  background: 'rgba(50, 147, 251, 0.15)',
                }"
                height="275px"
                :cell-style="{
                  fontFamily: 'OPPOSans',
                  fontWeight: 'bold',
                  fontSize: '14px',
                  color: '#79C2EC',
                  lineHeight: '67px',
                }"
                style="width: 100%"
              >
                <el-table-column
                  prop="teamName"
                  label="班组"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="production"
                  label="产量"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="scrapWeight"
                  label="报废重量(kg)"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="scrapRate"
                  label="报废率"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
              </el-table>
            </div>
            <div style="position: relative; top: -20px">
              <div id="pie" style="width: 100%; height: 220px"></div>
              <div class="legend row flex-around">
                <div
                  class="row"
                  v-for="item in info.defectTypeStats"
                  :key="item.id"
                >
                  <div
                    class="legend-sign"
                    :style="{ backgroundColor: item.itemStyle.color }"
                  ></div>
                  <div class="legend-text">
                    {{ item.defectType }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row flex-between box">
        <div class="pannel2">
          <img class="label" src="./label3.png" />
          <div class="flex-relative">
            <img class="box-img" src="./sign.png" />
            <div class="box-info">月产量统计</div>
          </div>
          <div id="bar" style="width: 100%; height: 210px"></div>
        </div>
        <div class="pannel2">
          <img class="label" src="./label3.png" />
          <div class="flex-relative">
            <img class="box-img" src="./sign.png" />
            <div class="box-info">月能源分析</div>
          </div>
          <div id="bar2" style="width: 100%; height: 210px"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { overviewDashboard } from "@/api/system/device";
import {} from "@/api/article";
import { getToken } from "@/utils/auth";
import moment from "moment";
import echarts from "echarts";
// import autofit from "autofit.js";
export default {
  components: {},
  filters: {},
  data() {
    return {
      chartLine: null,
      chartBar: null,
      chartPie: null,
      now: moment().subtract(4, "days").format("MM月DD日"),
      info: {
        deviceStatusList: [],
        orderStats: {
          completedOrders: "",
          completionRate: "",
          totalOrders: "",
          uncompletedOrders: "",
        },
      },
      nowDate: null,
      currentPage: 0,
      pageSize: 5,
      teamQualityStatsArr: [],
      currentPage2: 0,
      pageSize2: 4,
      electricityMeterListArr: [],
      currentPage3: 0,
      pageSize3: 3,
      deviceStatusListArr: [],
      colors: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56",
        "#4BC0C0",
        "#9966FF",
        "#FF9F40",
        "#4CAF50",
        "#E91E63",
        "#673AB7",
        "#FF5722",
        "#009688",
        "#CDDC39",
        "#9E9E9E",
        "#795548",
        "#607D8B",
        "#2196F3",
      ],
      refreshInterval: null,
      ctime: null,
      subInterval: null,
    };
  },
  created() {},
  beforeDestroy() {
    // 组件卸载时清除定时器
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval);
    }
    if (this.subInterval) {
      clearInterval(this.subInterval);
    }
  },
  mounted() {
    this.getList();
    // 组件挂载时启动定时器
    this.refreshInterval = setInterval(() => {
      if (this.subInterval) {
        clearInterval(this.subInterval);
      }
      this.getList();
    }, 60000);
    setInterval(() => {
      this.nowDate = moment().format("yyyy-MM-DD HH:mm:ss");
      // 计算ctime
      const now = moment();
      const hour = now.hour();
      this.ctime =
        hour < 8
          ? moment().subtract(2, "days").format("MM月DD日")
          : moment().subtract(1, "days").format("MM月DD日");
    }, 1000);
    document.addEventListener("fullscreenchange", this.checkFullscreen);
  },
  methods: {
    checkFullscreen() {
      this.isFullscreen = !!document.fullscreenElement;
      console.log("当前全屏状态:", this.isFullscreen);
    },
    fullScreen() {
      if (!document.fullscreenElement) {
        document.documentElement
          .requestFullscreen()
          .then(() => {
            this.isFullscreen = true;
            this.$store.commit("app/TOGGLE_FULLSCREEN", true);
          })
          .catch((err) => {
            console.error("全屏错误:", err);
          });
      } else {
        document.exitFullscreen().then(() => {
          this.isFullscreen = false;
          this.$store.commit("app/TOGGLE_FULLSCREEN", false);
        });
      }
    },
    drawPie() {
      this.chartPie = echarts.init(document.getElementById("pie"));
      let _this = this;
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: 0,
          itemShape: "rect",
          itemWidth: 20,
          itemHeight: 10,
          lineStyle: {
            width: 0,
          },
          textStyle: {
            //图例文字的样式
            color: "#fff", //图例文字颜色
            fontSize: 12, //图例文字大小
          },
          show: false,
        },
        series: [
          {
            // name: "Access From",
            type: "pie",
            radius: ["40%", "65%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: function (params) {
                return `{a|${params.name}}\n{hr|}\n{b|${params.percent}%}`;
              },
              rich: {
                a: {
                  fontSize: 14,
                  lineHeight: 20,
                  color: "#fff",
                },
                b: {
                  fontSize: 12,
                  align: "center",
                  color: "#fff",
                },
                hr: {
                  borderColor: "#fff",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
              },
            },
            labelLine: {
              show: true,
              color: "#fff",
            },
            data: [
              // { value: 1048, name: "Search Engine" },
              // { value: 735, name: "Direct" },
              // { value: 580, name: "Email" },
              // { value: 484, name: "Union Ads" },
              // { value: 300, name: "Video Ads" },
            ],
          },
        ],
      };
      _this.info.defectTypeStats.forEach((item, index) => {
        item.itemStyle = {
          color: _this.colors[index], // 设置每个扇形的颜色
        };
      });
      // if (_this.info.defectTypeStats.map(e=>e.percentage)) {

      // }
      let arr = _this.info.defectTypeStats.map((e) => e.percentage);
      let sum = arr.reduce((total, num) => total + (num || 0), 0);
      let temp = null;
      if (sum > 0) {
        temp = _this.info.defectTypeStats
          .filter((e) => e.percentage > 0)
          .map((e, index) => {
            return {
              value: e.percentage,
              name: e.defectType,
              itemStyle: e.itemStyle,
            };
          });
      } else {
        temp = _this.info.defectTypeStats.map((e, index) => {
          return {
            value: e.percentage,
            name: e.defectType,
            itemStyle: e.itemStyle,
          };
        });
      }

      console.log("333", temp, sum);
      option.series[0].data = temp;
      // 使用刚指定的配置项和数据显示图表。
      this.chartPie.setOption(option);
    },
    drawBar() {
      this.chartBar = echarts.init(document.getElementById("bar"));
      // 指定图表的配置项和数据
      var option = {
        title: {},
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          top: "14%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            color: "#fff",
          },
        },
        yAxis: {
          type: "value",
          name: "千克",
          axisLabel: {
            color: "#fff",
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        series: [
          {
            barWidth: "10px",
            type: "bar",
            itemStyle: {
              color: "#2e82ff",
            },
            data: [],
          },
        ],
      };
      option.xAxis.data = this.info.totalCapacityChart.map((e) => e.date);
      option.series[0].data = this.info.totalCapacityChart.map((e) => e.value);
      // 使用刚指定的配置项和数据显示图表。
      this.chartBar.setOption(option);
    },
    drawLine() {
      this.chartLine = echarts.init(document.getElementById("line"));
      // 指定图表的配置项和数据
      var option = {
        title: {},
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: this.info.shiftCapacityChart.map((e) => e.name),
          top: 10,
          itemShape: "rect",
          itemWidth: 20,
          itemHeight: 10,
          lineStyle: {
            width: 0,
          },
          textStyle: {
            //图例文字的样式
            color: "#fff", //图例文字颜色
            fontSize: 12, //图例文字大小
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisLabel: {
            color: "#fff",
          },
          splitLine: {
            show: false, // 隐藏 X 轴的分割线
          },
        },
        yAxis: {
          type: "value",
          name: "日产量",
          axisLabel: {
            color: "#fff",
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
          splitLine: {
            show: false, // 隐藏 X 轴的分割线
          },
        },
        series: [],
      };
      option.xAxis.data = this.info.shiftCapacityChart[0].value.map(
        (e) => e.time
      );
      this.info.shiftCapacityChart.forEach((e) => {
        option.series.push({
          name: e.name,
          type: "line",
          symbol: "circle",
          data: e.value.map((e) => e.value),
        });
      });
      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option);
    },
    startPagination() {
      this.teamQualityStatsArr = this.info.teamQualityStats.slice(
        this.currentPage * this.pageSize,
        (this.currentPage + 1) * this.pageSize
      );
      this.currentPage =
        (this.currentPage + 1) %
        Math.ceil(this.info.teamQualityStats.length / this.pageSize);
      console.log("currentPage", this.currentPage);
    },
    /** 查询用户列表 */
    getList() {
      let params = {
        startDate: moment().add(-30, "days").format("yyyy-MM-DD"),
        endDate: moment().format("yyyy-MM-DD"),
      };
      overviewDashboard(params).then((res) => {
        this.info = res;
        this.now = moment().subtract(4, "days").format("MM月DD日");
        console.log("res", res);
        this.startPagination();
        this.subInterval = setInterval(() => {
          this.startPagination();
        }, 5000);
        this.drawPie();
        // this.drawLine();
        this.drawBar();
        this.drawBar2();
        this.drawBar3();
      });
    },
    drawBar3() {
      this.chartBar = echarts.init(document.getElementById("bar3"));
      // 指定图表的配置项和数据
      var option = {
        title: {},
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "0%",
          top: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            color: "#fff",
          },
        },
        yAxis: {
          type: "value",
          name: "百分比",
          axisLabel: {
            color: "#fff",
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        series: [
          {
            barWidth: "10px",
            type: "bar",
            itemStyle: {
              color: "#2e82ff",
            },
            data: [],
          },
        ],
      };
      option.xAxis.data = this.info.completionRateStats.map((e) => e.date);
      option.series[0].data = this.info.completionRateStats.map((e) => e.value);
      // 使用刚指定的配置项和数据显示图表。
      this.chartBar.setOption(option);
    },
    drawBar2() {
      this.chartBar = echarts.init(document.getElementById("bar2"));
      // 指定图表的配置项和数据
      var option = {
        title: {},
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          top: "14%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            color: "#fff",
          },
        },
        yAxis: {
          type: "value",
          name: "度",
          axisLabel: {
            color: "#fff",
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        series: [
          {
            barWidth: "10px",
            type: "bar",
            itemStyle: {
              color: "#2e82ff",
            },
            data: [],
          },
        ],
      };
      option.xAxis.data = this.info.totalEnergyList.map((e) => e.date);
      option.series[0].data = this.info.totalEnergyList.map((e) => e.total);
      // 使用刚指定的配置项和数据显示图表。
      this.chartBar.setOption(option);
    },
  },
};
</script>
<style scoped lang='scss'>
#homepage {
  background: rgb(0, 17, 32);
  // height: calc(100vh - 50px);
  height: 100%;
}
.header {
  position: absolute;
}
.title {
  width: 100%;
  height: 100%;
}
.label {
  width: 100%;
  position: absolute;
}
.box-info {
  position: absolute;
  top: 0;
  z-index: 9;
  color: #fff;
  margin-left: 20px;
  line-height: 36px;
}
.box-img {
  height: 32px !important;
  width: 200px !important;
}
.pannel {
  width: 33%;
  height: 524px;
  position: relative;
  .label {
    height: 524px;
  }
}
.pannel3 {
  width: 100%;
  height: 260px;
  position: relative;
  img {
    height: 260px;
  }
}
.pannel2 {
  margin-top: 6px;
  width: 49.8%;
  position: relative;
}
.pannel2 img {
  height: 250px;
}
.box {
  margin: 0 10px;
}
.row {
  display: flex;
}
.flex-between {
  justify-content: space-between;
}
.container {
  position: relative;
  top: 90px;
}
.model-title {
  width: 180px;
  text-align: center;
  // height: 50px;
  line-height: 32px;
  font-size: 18px;
}
.model-title2 {
  width: 220px;
  text-align: center;
  line-height: 32px;
  font-size: 18px;
}
.model-pannel {
  // height: 50px;
  // line-height: 50px;
  color: #fff;
  width: 100%;
}
.flex-wrap {
  flex-wrap: wrap;
}
::v-deep.el-table {
  background-color: transparent;
  thead {
    tr {
      background-color: transparent !important;
    }
    th {
      background: rgba(50, 147, 251, 0.15) !important;
    }
  }
  tbody {
    tr {
      td {
        border-bottom: 2px solid #063b64 !important;
      }
      td:first-child {
        border-left: 2px solid #063b64;
      }
      td:last-child {
        border-right: 2px solid #063b64;
      }
      margin-bottom: 3px;
    }
    tr:first-child {
      td {
        border-top: 2px solid #063b64;
      }
    }
  }
  .el-table__header {
    background-color: #052c55;
  }
  .el-table__expand-icon--expanded {
    transform: rotate(180deg);
  }
  .el-table__expanded-cell {
    background-color: transparent;

    > div {
      margin-top: 0;
      background-color: transparent;
      padding: 0 10px;
      thead {
        background: rgba(27, 130, 183, 0.4);
        tr {
          background-color: transparent !important;
        }
        th {
          background: transparent !important;
          color: #ffffff;
          font-size: 14px;
        }
      }
      tbody {
        td {
          color: #79c2ec;
          font-size: 14px;
          padding: 0;
        }
      }
      tr {
        background: #09385d;
        &.el-table__row--striped td.el-table__cell {
          background: #0d4a72;
        }
      }
    }
  }
  /* 自定义整个滚动条 */
  ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important; /* 滚动条宽度 */
    border-radius: 16px !important;
  }

  /* 自定义滚动条轨道 */
  ::-webkit-scrollbar-track {
    background: #016f8e00 !important; /* 轨道颜色 */
  }

  /* 自定义滚动条的滑块（thumb） */
  ::-webkit-scrollbar-thumb {
    background: #0081ff !important; /* 滑块颜色 */
    // border-radius: 16px !important;
  }
  .el-table__body {
    tr:hover > td.el-table__cell {
      // background-color: transparent !important;
    }
    tr:hover {
      td {
        color: #fff !important;
        span {
          color: #fff !important;
        }
      }
    }
    .current-row {
      td {
        color: #fff !important;
        span {
          color: #fff !important;
        }
      }
    }
  }
  margin-top: 10px;
  &::before {
    display: none;
  }

  th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border: none;
  }
  tr {
    background: #07315a;
    &.el-table__row--striped td.el-table__cell {
      background: #052950;
    }
    &:hover > td.el-table__cell {
      background: #052950;
    }
  }

  td.el-table__cell {
    border-bottom: none;
    height: 35px;
  }
  th.el-table__cell > .cell {
    padding: 0;
  }
  .cell {
    padding: 0;
  }
  .el-table__empty-block {
    background-color: #07315a;
  }

  .el-table__body tr.hover-row > td.el-table__cell {
    background-color: #063b64;
  }
}
.table-box {
  margin: 0 16px;
}
.device-info {
  color: #fff;
  width: 33%;
  text-align: center;
  margin-top: 10px;
}
.device-name {
  // line-height: 28px;
}
.run {
  color: rgb(81, 245, 12);
  line-height: 32px;
}
.close {
  color: red;
  line-height: 32px;
}
.now {
  color: #fff;
  position: absolute;
  right: 26px;
  bottom: 65%;
  z-index: 99;
}
.model-number {
  background: rgb(45, 56, 86);
  color: #71cef8;
  width: 30px;
  font-weight: bold;
  border-bottom: 2px solid #71cef8;
  text-align: center;
  margin-bottom: 6px;
  margin-right: 7px;
  height: 30px;
  line-height: 30px;
}
.model-number2 {
  background: rgb(45, 56, 86);
  color: #71cef8;
  width: 30px;
  font-weight: bold;
  border-bottom: 2px solid #71cef8;
  text-align: center;
  margin-bottom: 10px;
  margin-right: 10px;
  height: 30px;
  line-height: 30px;
}
.unit {
  font-size: 18px;
  line-height: 32px;
  width: 60px;
  text-align: center;
}
.model-sign {
  margin-right: 6px;
  font-weight: bold;
}

.legend {
  position: relative;
  z-index: 99;
  color: #fff;
  top: -20px;
}
.legend-sign {
  width: 20px;
  height: 10px;
  border-radius: 2px;
  position: relative;
  top: 6px;
  margin-right: 2px;
}
.flex-around {
  justify-content: space-around;
}
.title-font {
  font-size: 36px;
  color: #ffffff;
  font-weight: bold;
  font-family: YouSheBiaoTiHei;
  line-height: 50px;
  letter-spacing: 6px;
  text-shadow: 0px 0px 10px #89b7fe;
  text-align: center;
  font-style: normal;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}
.time {
  color: #fff;
  font-size: 18px;
  line-height: 32px;
  width: 220px;
  text-align: center;
  margin: 10px 0;
}
.fullscreen {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 999;
  color: yellow;
}
.cTime {
  color: #fff;
  position: absolute;
  right: 46px;
  top: 10px;
}
.cTime2 {
  color: #fff;
  position: absolute;
  right: 20px;
  top: 10px;
}
</style>
